<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>

	<script>
		const data = [
			{ code: "110000", name: "北京市", province: "11" },
			{ code: "120000", name: "天津市", province: "12" },
			{ code: "130000", name: "河北省", province: "13" },
		]

		// 核心：对于下拉框，区分 innerHTML 与 value 的区别

		// 需求：将数据渲染到省份下拉框中



		// 需求：默认选中 天津市


	</script>
</body>

</html>